<template>
  <div class="center" ref="warrper">
    <div>
      <div class="person-contant">
        <div class="left">
          <div class="name" @click="jumpClick('/Material')">
            {{userinfo.nickname}}
            <img :src="arrow" alt>
          </div>
          <div class="phone">
            <img :src="phone" alt>
            {{userinfo.mobile}}
          </div>
        </div>
        <div class="right">
          <img :src="userinfo.avatar" alt>
        </div>
      </div>

      <div class="menu-contant" @click="jumpClick('/Order')">
        <div class="item-contant">
          <img :src="titleIcon[0]" class="img">
          <div class="text">充电中</div>
        </div>
        <div class="item-contant">
          <img :src="titleIcon[1]" class="img">
          <div class="text">已完成</div>
        </div>
        <div class="item-contant">
          <img :src="titleIcon[2]" class="img">
          <div class="text">已取消</div>
        </div>
        <div class="item-contant">
          <img :src="titleIcon[3]" class="img">
          <div class="text">全部订单</div>
        </div>
      </div>
      <div class="card-contant" @click="jumpClick('/Pack')">
        <div class="title">我的钱包余额</div>
        <div class="blance">￥{{info.all_balance}}</div>
        <div class="tags">
          <div class="point"></div>
          <div class="text">进入钱包</div>
        </div>
      </div>
      <div class="menu-contant">
        <div class="item-contant">
          <img :src="titleIcon[4]" class="img" @click="jumpOut">
          <div class="text">运营商</div>
        </div>
        <div class="item-contant">
          <img :src="titleIcon[5]" class="img" @click="jumpOut">
          <div class="text">物业</div>
        </div>
        <div class="item-contant">
          <img :src="titleIcon[6]" class="img" @click="jumpOut">
          <div class="text">成为运营商</div>
        </div>
        <div class="item-contant">
          <img :src="titleIcon[7]" class="img" @click="jumpClick('/Add')">
          <div class="text">代理加盟</div>
        </div>
      </div>
      <div class="gray-line"></div>
      <div class="function-contant">
        <a class="fun-item-contant" :href="'tel:'+config.tel">
          <img :src="iconArr[0].img" alt>
          <div class="text">{{iconArr[0].text}}</div>
        </a>
        <div
          class="fun-item-contant"
          v-for="(item,index) in iconArr"
          :key="index"
          @click="jumpClick(item.path)"
          v-show="index!=0"
        >
          <img :src="item.img" alt>
          <div class="text">{{item.text}}</div>
        </div>
      </div>
      <div class="space"></div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import "index.less";
</style>

<script>
import { mapActions, mapState } from "vuex";
import BScroll from "better-scroll";

export default {
  name: "center",
  data() {
    return {
      avatar: require("../../assets/person/avatar.png"),
      phone: require("../../assets/person/phone.png"),
      arrow: require("../../assets/person/arrow.png"),
      titleIcon: [
        require("../../assets/center/1.png"),
        require("../../assets/center/2.png"),
        require("../../assets/center/3.png"),
        require("../../assets/center/4.png"),
        require("../../assets/center/5.png"),
        require("../../assets/center/6.png"),
        require("../../assets/center/7.png"),
        require("../../assets/center/8.png")
      ],
      iconArr: [
        {
          img: require("../../assets/center/9.png"),
          text: "我的客服",
          path: ""
        },
        {
          img: require("../../assets/center/10.png"),
          text: "附近站点",
          path: "/"
        },
        {
          img: require("../../assets/center/11.png"),
          text: "我的收藏",
          path: "/Collections"
        },
        {
          img: require("../../assets/center/12.png"),
          text: "关于我们",
          path: "/About"
        },
        {
          img: require("../../assets/center/13.png"),
          text: "意见反馈",
          path: "/Suggest"
        },
        {
          img: require("../../assets/center/14.png"),
          text: "常见故障",
          path: "/Help"
        }
      ],
      userinfo: {},
      config: {}
    };
  },
  created() {
    this.change(true);
    // 获取用户信息
    this.getUser();
    this.getConfig();
  },
  mounted() {
    new BScroll(this.$refs.warrper, {
      click: true
    });
  },
  activated() {
    this.navChange(4);
  },
  methods: {
    ...mapActions("Home", ["change", "navChange"]),
    ...mapActions("Person", ["setPerson"]),
    // 获取用户信息
    getUser() {
      this.$dialog.loading.open("正在加载");
      this.$http.get("/user/Info", {}).then(res => {
        this.userinfo = res.data.data;
        this.setPerson(res.data.data);
        this.$dialog.loading.close();
      });
      this.navChange(4);
    },
    jumpClick(path) {
      if (path.length < 0) {
        return;
      }
      if (path == "/Order") {
        this.navChange(3);
      }
      if (path == "/") {
        this.navChange(1);
      }
      this.$router.push({
        path: path
      });
    },
    jumpOut() {
      window.location.href = this.config.admin_url;
    },
    // 获取配件
    getConfig() {
      this.$http.get("/config", {}).then(res => {
        this.config = res.data.data;
        console.log(this.config);
      });
    }
  },
  computed: {
    ...mapState({
      info: state => state.Person.personInfo
    })
  },
  components: {}
};
</script>
